<div class="clue" style="color: red; padding: 0px 0px 10px 0px;">
    【操作提示】修改完成后，请点击“保存列表”按钮。
</div>

<!--列表-->
<table class="am-table am-table-bordered am-table-radius am-table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>排序</th>
            <th>财付通名称</th>
            <th>财付通账号</th>
            <th>二维码</th>
            <th width="80px">状态</th>
            <th>用户组</th>
            <th>入款限额</th>
            <th width="80px">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<div class="button_line">
    <button class="am-btn am-btn-primary btn-add admin_button">新增</button>
    <button class="am-btn am-btn-primary btn-save admin_button">保存列表</button>
</div>

<style type="text/css">
    .am-table img {
        width: 60px;
        height: 60px;
    }
</style>

<script>
    Util.applyRights({
        "/client/charge_save": "button_line",
    });
    
    var alipay = [], layers = [];
    Layer.query(undefined, function(r) {
        layers = Layer.sort(r);
        Classify.queryExt("money", "cft", true, [], function(r) {
            alipay = r;
            fillAlipay();
        });
    });

    // 用户组复选框
    function genGroups(roles) {
        var td = $("<td class='groups'></td>");
        for (var i in layers) {
            var line = '<label class="am-checkbox"><input type="checkbox" value="__v__" data-am-ucheck __c__> __t__</label>';
            line = line.replace(/__v__/, layers[i].level);
            line = line.replace(/__t__/, layers[i].name);
            if (roles.indexOf(layers[i].level + "") == -1) line = line.replace(/__c__/, '');
            else line = line.replace(/__c__/, 'checked');
            td.append(line);
        }
        return td;
    }

    function fillAlipay() {
        var table = $(".am-table tbody");
        table.empty();
        alipay.sort(function(a, b) {
            return (b.sort || 0) - (a.sort || 0);
        });
        for (var i in alipay) {
            var tr = $("<tr></tr>");
            tr.append('<td>' + i + '</td>');
            tr.append('<td class="center"><input type="text" class="empty_input sort" value="0"></td>');
            tr.append('<td><input type="text" class="empty_input name" value=""></td>');
            tr.append('<td><input type="text" class="empty_input account" value=""></td>');
            tr.append('<td><img src="" class="qrcode"/> <input type="file" class="qrcode" data-url="/tephra/ctrl-http/upload" value="' + i + '" multiple></td>');
            tr.append('<td><label class="am-checkbox"><input type="checkbox" class="enable" value="" data-am-ucheck> 启用</label></td>');
            tr.append(genGroups(alipay[i].layer || []));
            tr.append('<td>' +
                '<input type="number" class="min" placeholder="输入最低入账金额" value="' + (alipay[i].min || '') + '"/><br>' +
                '<input type="number" class="max" placeholder="输入最高入账金额" value="' + (alipay[i].max || '') + '"/>' +
                '</td>');
            tr.append('<td><a href="#" value="' + i + '">删除</a></td>');
            table.append(tr);
        }

        var sorts = $(".am-table input.sort");
        var names = $(".am-table input.name");
        var accounts = $(".am-table input.account");
        var qrcodes = $(".am-table img.qrcode");
        var enables = $("input.enable");
        for (var i in alipay) {
            $(sorts[i]).val(alipay[i].sort || 0);
            $(names[i]).val(alipay[i].name);
            $(accounts[i]).val(alipay[i].account);

            var url = context.config.url.replace(":9090", "");
            $(qrcodes[i]).attr("src", 
            url + alipay[i].qrcode);

            if (alipay[i].enable == 1) $(enables[i]).uCheck('check');
            else $(enables[i]).uCheck('uncheck');
        }

        $(".am-table a").click(function(e) {
            var i = $(e.currentTarget).attr("value");
            alipay.splice(i, 1);
            fillAlipay();
        });

        $(".am-table input.qrcode").change(function(e) {
            var i = $(e.currentTarget).attr("value");
            var data = new FormData();
            var file = $(e.currentTarget)[0].files[0];
            if (file.size > 200 * 1024) {
                alert2("二维码大小必须小于200K！", true);
                return;
            }
            data.append("eddy.message.image", file);
            
            startLoading();
            CMD.upload(data, null, function(r) {
                stopLoading();
                alipay[i].qrcode = r;
                fillAlipay();
                alert2("二维码上传完成，请点击保存后生效。", true);
            });
        });
        $("select").selected();
        $("input[type='checkbox']").uCheck();
    }

    $(".btn-add").click(function() {
        alipay.push({
            account: "",
            name: "",
            enable: 1,
            qrcode: "",
            layer: ["0"],
        });
        fillAlipay();
    });

    $(".btn-save").click(function() {
        // 回写数据
        var sorts = $(".am-table input.sort");
        var names = $(".am-table input.name");
        var accounts = $(".am-table input.account");
        var enables = $("input.enable");
        var groups = $(".am-table .groups");
        var mins = $(".am-table input.min");
        var maxs = $(".am-table input.max");
        for (var i in alipay) {
            alipay[i].sort = $(sorts[i]).val() || 0;
            alipay[i].name = $(names[i]).val();
            alipay[i].account = $(accounts[i]).val();
            if (enables[i].checked) alipay[i].enable = 1;
            else alipay[i].enable = 0;

            alipay[i].min = parseInt($(mins[i]).val());
            alipay[i].max = parseInt($(maxs[i]).val());

            alipay[i].layer = [];
            var arr2 = $(groups[i]).find("input[type='checkbox']:checked");
            for (var j = 0; j < arr2.length; j++) {
                alipay[i].layer.push($(arr2[j]).val());
            }
        }

        startLoading();
        Classify.saveExt("money", "cft", alipay, function() {
            stopLoading();
            alert2("保存成功！");
        });
    });
</script>
